<template>
    <div>
        <el-header style="background-color:whitesmoke">
            <el-select v-model="collegeValue" placeholder="部门" style="height: 50px" @change="teaSearch()" clearable>
                <el-option
                        v-for="item in collegeForm"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name+'/'+item.id">
                </el-option>
            </el-select>
            <el-select v-model="majorValue" placeholder="子部门" style="height: 50px" @change="teaSearch()" clearable>
                <el-option
                        v-for="item in majorForm"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name+'/'+item.id">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-document-add" @click="add()">添加教职工</el-button>
            <el-button type="primary" icon="el-icon-user-solid" @click="updateTea() ">教师注册</el-button>
            <el-button type="primary" @click="export1()">导出数据<i class="el-icon-download"></i></el-button>
            <el-upload
                    :show-file-list="false"
                    accept="application/vnd.ms-excel"
                    action="http://localhost:8181/teacher/import"
                    :on-success="fileUploadSuccess"
                    :on-error="fileUploadError"
                    :disabled="fileUploadBtnText=='正在导入(成功后点左侧注册)'"
                    :before-upload="beforeFileUpload"
                    style="display: inline">
                <el-button  type="success"
                            :loading="fileUploadBtnText=='正在导入(成功后点左侧注册)'">
                    <i class="el-icon-upload el-icon--right"></i>
                    {{fileUploadBtnText}}
                </el-button>
            </el-upload>
        </el-header>
        <el-form style="width: 40%" :model="TeacherInfo">
            <el-form-item label="输入姓名查找" >
                <el-input v-model="tname" clearable>输入姓名查找</el-input>
                <el-button  type="primary" icon="el-icon-search" @click="searchByName()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="id"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="tname"
                    label="名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="collegeName"
                    label="部门"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="majorName"
                    label="子部门"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="iphone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="px"
                    label="排序"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button  @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small">修改</el-button>
                    <el-button @click="deleteTeacher(scope.row)" type="danger" icon="el-icon-delete"  size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                page-size="2"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "TeacherInfo",
        methods: {
            fileUploadSuccess(response, file,fileList){
                if (response){
                    //this.$message({type:response.status,message:response.msg});
                    this.$alert('导入成功', '消息', {
                        confirmButtonText: '确定',
                    })
                    this.fileUploadBtnText='导入数据'
                }
            },
            fileUploadError(err,file,fileList){
                this.$message({type:'error',message:"导入数据！"});
                this.fileUploadBtnText='导入数据';
            },
            beforeFileUpload(file){
                this.fileUploadBtnText='正在导入';
            },

            export1(){
                window.open("http://localhost:8181/teacher/export","_parent")
            },
            findCollegeName(){
                const _this=this;
                axios.get("http://localhost:8181/teacher/f1").then(function (resp) {
                    console.log(resp.data)
                    _this.collegeForm=resp.data;
                    console.log(_this.collegeValue)
                })
            },
            teaSearch(){
                const _this=this
                this.TeacherInfo.collegeName=_this.collegeValue.split('/')[0]
                this.TeacherInfo.majorName=_this.majorValue.split('/')[0]
                //   this.StudentInfo.sname=this.sname
                console.log(_this.TeacherInfo)
                axios.post('http://localhost:8181/teacher/search/1/9/',_this.TeacherInfo).then(function (resp) {
                    //  console.log(_this.value)
                    //console.log(resp)
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
                //console.log(_this.StudentInfo)
                _this.TeacherInfo={}
                _this.change()
            },
            searchByName(){
                const _this=this
                this.TeacherInfo.tname=_this.tname
                //console.log(this.StudentInfo)
                axios.post('http://localhost:8181/teacher/search/1/9/',_this.TeacherInfo).then(function (resp) {
                    //  console.log(_this.value)
                    //console.log(resp)
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
                //console.log(_this.StudentInfo)
                this.StudentInfo={}
            },
            // change(){
            //     //  alert(this.key)
            //     const _this=this
            //     axios.get('http://localhost:8181/college/getMajorInfoByCollegeId/'+ _this.value.split('/')[1]).then(function (resp) {
            //         _this.MajorInfo=resp.data
            //         //   console.log(resp.data)
            //     })
            // },
            // change2(){
            //     const _this=this
            //     //  alert(_this.major)
            //     axios.get('http://localhost:8181/college/getGradeInfoByMajorId/'+ _this.major.split('/')[1]).then(function (resp) {
            //         _this.GradeInfo=resp.data
            //     })
            // },
             change(){
            const _this =this
            axios.get("http://localhost:8181/teacher/findByCollegeId/"+this.collegeValue.split('/')[1]).then(function (resp) {
                _this.majorForm=resp.data
                console.log(resp.data)
            })
            },
            updateTea(){
                const _this=this
                axios.get('http://localhost:8181/teacher/register').then(function (resp) {
                    console.log(resp)
                    _this.$alert('教职工注册成功', '成功', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                })
            },
            add(){
                this.$router.push({
                    path:'/AddTeacher',
                    query:{
                        code:'1'
                    }
                })
            },
            edit(row) {
                this.$router.push({
                    path:'/updateTeacher',
                    query:{
                        id:row.id
                    }
                })
            },

            deleteTeacher(row){
                const  _this=this
                axios.get("http://localhost:8181/teacher/deleteTeacher/"+row.id).then(function (resp) {
                    if (resp.data==="删除成功"){
                        _this.$alert('教职工: '+row.name+'删除成功','消息',{
                            confirmButtonText:'确定',
                            callback:action => {
                                window.location.reload()
                            }
                        });
                    }
                })
            },
            page(currentPage){
                //   alert(currentPage)
                // currentPage=currentPage-1
                const _this=this
                axios.post('http://localhost:8181/teacher/search/'+currentPage+'/3',_this.TeacherInfo).then(function (resp) {
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
            }
        },
        created() {
            // _this全局的this
            const  _this=this;
            console.log(_this.TeacherInfo)
            axios.post("http://localhost:8181/teacher/search/1/3",_this.TeacherInfo).then(function (resp) {

                _this.tableData=resp.data.content
                _this.total=resp.data.toTalElements
            })
            this.findCollegeName()
        },
        data() {
            return {
                fileUploadBtnText:'导入',
                tname:'',
                key:[],
                value:[],
                total:null,

                collegeValue:'',
                majorValue:'',

                collegeForm: {
                    id: '',
                    name: ''
                },
                majorForm:{
                    id:'',
                    name:'',
                    collegeId:''
                },

                TeacherInfo: {
                    collegeName:'',
                    majorName:'',
                    tname:'',
                },
                tableData: [{
                    id: '',
                    tname: '',
                    wxId: '',
                    px:'',
                    majorId:"",
                    majorName:'',
                    collegeId:'0',
                    collegeName:'',
                    iphone:''

                }
                ]
            }
        }
    }
</script>

<style scoped>

</style>
